<template>
  <div class="page-container">
    <div class="page-header">
      <nav>
        <h4>
          <slot name="leftTitle" />
          {{ route.meta.title }}
          <el-icon v-if="showRefresh" class="icon" @click="refreshList"><refresh /></el-icon>
        </h4>
        <slot name="select" />
      </nav>
      <section>
        <slot name="button" />
      </section>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, watch, ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { Refresh } from "@element-plus/icons-vue";
export default defineComponent({
  name: "Header",
  props: {
    title: {
      type: String,
      default: "",
    },
    showRefresh: {
      type: Boolean,
      default: true
    }
  },
  emits: ["refresh"],
  components: {
    Refresh,
  },
  setup(props, { emit }) {
    
    const route = useRoute();
    const refreshList = () => {
      emit("refresh");
    };
    return {
      route,
      refreshList,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/styles/variables.module.scss";
h4 {
  margin: 0;
  // margin-bottom: 16px;
  height: 36px;
  line-height: 36px;
  color: #3C475D;
  font-size: 18px;
  font-weight: 600;
  cursor: default;
  :deep(a) {
    cursor: pointer;
    color: $mainColor;
  }
}
.page-header {
  display: flex;
  
  // padding-bottom: 16px;
  nav {
    flex: 1;
    text-align: left;
    z-index: 999;
    h4 {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background: #fff;
      display: inline-block;
      padding: 0 20px;
      height: 45px;
      line-height: 45px;
    }
  }
  section {
    text-align: right;
  }
}
.icon {
  cursor: pointer;
  vertical-align: -2px;
  margin-left: 1px;
}
</style>